/**
 * 单选框样式
 * @author xiaoxujs
 */

import { FC, useEffect, useState } from "react";
import { IRadioX } from "../../type/components";
import { RadioBox, RadioLabelBox } from "./style";


const Radio: FC<{
    name: string; // 单选框名称
    value: string; // 单选框值
    label: string; // 单选框标签
    checked: boolean; // 是否选中
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; // 单选框变化回调
}> = ({ name, value, label, checked, onChange }) => {
    return (
        <RadioLabelBox $color={checked ? '#00AEFF' : '#0B406F'} >
            <input
                type="radio"
                name={name}
                value={value}
                checked={checked}
                onChange={onChange}
            />
            {label}
        </RadioLabelBox>
    );
};

const RadioX: FC<{
    name: string; // 单选框名称
    options: IRadioX[]; // 单选框选项
    onChange?: (value: string) => void; // 单选框变化回调
    value?: string; // 选中的值
}> = ({
    name, // 单选框名称
    options, // 单选框选项
    onChange, // 单选框变化回调
    value
}) => {
        const [selectedValue, setSelectedValue] = useState<string>();
        useEffect(() => { // 初始化选中值
            if (value) { // 如果有值，就选中值
                setSelectedValue(value); // 选中值
            } else { // 如果没有值，就选中第一个
                setSelectedValue(options[0].value); // 选中第一个
                onChange && onChange(options[0].value)
            }
        }, [value, options, onChange])

        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
            setSelectedValue(event.target.value);
            if (onChange) {
                onChange(event.target.value); // 调用父组件传递的onChange方法，并传递选中值
            }
        };
        return <RadioBox>
            {options.map((option) => (
                <Radio
                    key={option.value}
                    name={name}
                    value={option.value}
                    label={option.label}
                    checked={selectedValue === option.value}
                    onChange={(e) => handleChange(e)}
                />
            ))}
        </RadioBox>
    }
export default RadioX